<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,i) in $store.state.home.menu" :key="i" @mouseenter="mouseenter">
        <!-- <dd v-for="(item,i) in menu" :key="i" @mousemove="mouseenter"> -->
        <i :class="item.type"/>
        {{ item.name }}
        <span class="arrow"/>
      </dd>
    </dl>
    <div v-if="kind" class="detail" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item,i) in curdetail.child">
        <!-- 内嵌循环 -->
        <h4 :key="i">{{ item.title }}</h4>
        <span v-for="v in item.child" :key="v">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: '',
      menu: [
        {
          type: 'food',
          name: '美食',
          child: [
            {
              title: '美食',
              child: ['代金券', '甜点饮品', '火锅', '自助餐', '小吃快餐']
            }
          ]
        },
        {
          type: 'takeout',
          name: '外卖',
          child: [
            {
              title: '外卖',
              child: ['美团外卖']
            }
          ]
        },
        {
          type: 'hotel',
          name: '酒店',
          child: [
            {
              title: '酒店星级',
              child: ['经济型', '舒适/三星', '高档/四星', '豪华/五星']
            }
          ]
        }
      ]
    }
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      const base = Math.round(Math.random() * length)
      this.menu.push(this.menu[base])
    }
  },

  computed: {
    curdetail: function() {
      // this.menu.some((item, i) => {
      //   if (item.type === this.kind) {
      //     return item
      //   }
      // })
      // return this.menu.filter(item => item.type === this.kind)[0]
      return this.$store.state.home.menu.filter(
        item => item.type === this.kind
      )[0]
    }
  },
  methods: {
    mouseenter: function(e) {
      this.kind = e.target.querySelector('i').className
    },

    mouseleave: function(e) {
      let self = this
      self._timer = setTimeout(function() {
        self.kind = ''
      }, 250)
    },

    sover: function() {
      clearTimeout(this._timer)
    },
    sout: function() {
      this.kind = ''
    }
  }
}
</script>

<style lang="css">
</style>
